    <div id="timelineLimiter"> <!-- Hides the overflowing timelineScroll div -->

	    <div id="timelineScroll"> <!-- Contains the timeline and expands to fit -->

		<!-- ######################################################  --->
        
        <g:set var="colors" value="${['green','blue','chreme']}" />
        <g:each in="${weeks}" var="week" status="index">
        
            <div class="event">
                <div class="eventHeading ${colors[index%3]}">第${index+1}周</div>
                <ul class="eventList">
                <li class="trainProgramme" ><g:if test="${week.trainProgramme}">${week.trainProgramme?.description}</g:if>
                <g:else><g:formatDate  date="${week.first}"/>---<g:formatDate  date="${week.last}"/><br></g:else>
                </li></ul>
                <div class="manager">
                <a href="javascript:void(0);" class="edit"><g:message code="default.button.edit.label" default="Edit" /></a>

                <input type="hidden" class="datazone" name="id" value="">
                <input type="hidden" class="datazone" name="classes.id" value="${classesid}">
                <input type="hidden" class="datazone" name="course" value="${course}">
                <input type="hidden" class="datazone" name="week" value="${index+1}">
                <input type="hidden" class="datazone" name="term.id" value="${lastTerm.id}">
      
                </div>
                </div>
                </g:each>
          <!-- ######################################################  --->
        <div class="clear"></div>

        </div>
        
        <div id="scroll"> <!-- The year time line -->
            <div id="centered"> <!-- Sized by jQuery to fit all the years -->
	            <div id="highlight"></div> <!-- The light blue highlight shown behind the years -->
	              <g:each in="${weeks}" var="week" status="index">
                    <div class="scrollPoints">${index+1}</div>
                  </g:each>
                

                <div class="clear"></div>
            </div>
        </div>
        
        <div id="slider"> <!-- The slider container -->
        	<div id="bar"> <!-- The bar that can be dragged -->
            	<div id="barLeft"></div>  <!-- Left arrow of the bar -->
                <div id="barRight"></div>  <!-- Right arrow, both are styled with CSS -->

          </div>
        </div>
        
    </div> 

